<template>
  <div id="Company_licence">
    <div class="additem-wrap">
      <svg version="1.1" id="additem-gmp" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
        y="0px" viewBox="-274 568 200 200" style="enable-background:new -274 568 200 200;" xml:space="preserve">
        <path d="M-129,758c-24.9,0-45-20.2-45-45s20.1-45,45-45s45,20.2,45,45S-104.2,758-129,758z M-104,708h-20v-20h-10v20h-20v10h20v20
	h10v-20h20V708z M-244,678h70c-6.9,8.3-9,18.6-10,30h-60v20h60c1.9,12.3,10.8,23.5,23.5,30H-244c-11.1,0-20-9-20-20V598
	c0-11,8.9-20,20-20h110c11.1,0,20,9,20,20v60h-130V678z M-134,628v-20h-110v20H-134z" fill="#388bc4" />
      </svg>
      <span style="color:#388bc4">添加其他证书</span>
    </div>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="证书1" name="1">
        <el-form :inline="true" :model=" licences_info[0]" label-width="110px">
          <el-form-item label="证书编号">
            <el-input v-model=" licences_info.code" placeholder="证书编号"></el-input>
          </el-form-item>
          <el-form-item label="证书类型">
            <el-input v-model=" licences_info.type" placeholder="证书类型"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="认证范围">
            <el-input v-model=" licences_info.range" placeholder="认证范围"></el-input>
          </el-form-item>
          <el-form-item label="发证单位">
            <el-input v-model=" licences_info.award_org" placeholder="发证单位"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="有效期">
            <el-date-picker v-model=" licences_info.dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" default-value="2010-10-01"></el-date-picker>
          </el-form-item>
          <br>
          <el-form-item label="企业id">
            <el-input v-model=" licences_info.enterprise" placeholder="企业id"></el-input>
          </el-form-item>
          <el-form-item></el-form-item>
          <br>
          <el-form-item label="上传图片">
            <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item></el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>
    <div class="btn-group">
      <el-button @click="getbak">取消</el-button>
      <el-button type="primary" @click="update">提交</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        adminId: '',
        adminToken:'',
        enterprise:'',
        activeNames: ['1'],
        activeNames: 'first',
        contact_info_bak: [{}],
        imageUrl:'',
         licences_info: [{
          enterprise: '',
          code: '',
          type: '',
          range: '',
          award_org: '',
          dateRange: '',
          image: ''
        }],
      }
    },
    mounted() {
      this.adminId = this.$store.getters.getInfo.id
      this.adminToken = this.$store.getters.getInfo.token
      this.enterprise = this.$store.getters.getInfo.enterprise
      if (this.adminId && this.adminToken) {
        this.$http({
          url: './enterprise/' + this.enterprise + '/',
          headers: {
            'Authorization': 'Token ' + this.adminToken
          },
          method: 'get',
        }).then(
          response => {
            //success
            if (response.status == '200') {
              this. licences_info_bak = JSON.parse(JSON.stringify(response.data. licences_info))
              this. licences_info = response.data. licences_info
            } else if (response.status == '401') {
              alert('error')
            }
          },
          response => {
            //error

          }
        )
      } else {
        this.$message({
          message: '登陆已过期，请重新登陆',
          type: 'warning',
          showClose: true,
        });
      }
    },
    methods: {
      getbak() {
        this.licences_info = JSON.parse(JSON.stringify(this.licences_info_bak))
      },
      update() {
        if (this.adminId && this.adminToken) {
          this.$http({
            url: '/enterprise-contact-info/' + this.enterprise + '/',
            headers: {
              'Authorization': 'Token ' + this.adminToken
            },
            method: 'put',
            data: this.base_info
          }).then(
            response => {
              //success
              console.log(response)
              if (response.status == '200') {
                this.$message({
                  showClose: true,
                  message: '更新成功',
                  type: 'success'
                });
              } else {
                this.licences_info = this.licences_info_bak
                this.$message({
                  showClose: true,
                  message: '更新失败',
                  type: 'warning'
                });
              }
            }
          ).catch(function (error) {
            if (error.response) {

              alert(error.response.data.detail)
            } else if (error.request) {
              console.log(error.request);
            } else {
              // Something happened in setting up the request that triggered an Error
              console.log('Error', error.message);
            }
            console.log(error);
          });
        } else {
          this.$message({
            message: '登陆已过期，请重新登陆',
            type: 'warning',
            showClose: true,
          });
        }
      },
       handleClick(tab, event) {
        console.log(tab, event);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>

<style scoped>
  #Company_gsp >>> .el-form-item__content {
    width: 220px;
  }

  .btn-group {
    width: 600px;
    margin: 0 auto;
    text-align: right
  }

</style>
